<template>
  <div class='container'>
    <el-form ref='form' :model='filterForm'>
      <el-form-item>
        <el-date-picker
          type='date'
          placeholder='选择开始日期'
          v-model='filterForm.startDate'
          style='width: 175px;'
          format='yyyy-MM-dd'
          value-format='yyyy-MM-dd'
        ></el-date-picker>
        <el-date-picker
          type='date'
          placeholder='选择结束日期'
          v-model='filterForm.endDate'
          style='width: 175px; margin-left: 10px;'
          format='yyyy-MM-dd'
          value-format='yyyy-MM-dd'
        ></el-date-picker>
        <el-select
          v-model='filterForm.country'
          :placeholder='filterForm.show1'
          @change='selectGet1'
          filterable
          clearable
          class='normal-input'
          style='width: 200px; margin-left: 10px;'
        >
          <el-option
            v-for='item in countries'
            :key='item.value'
            :label='item.name'
            :value='item.value'
          ></el-option>
        </el-select>
        <el-select
          v-model='filterForm.endCountry'
          :placeholder='filterForm.show2'
          @change='selectGet2'
          filterable
          clearable
          class='normal-input'
          style='width: 200px; margin-left: 10px;'
        >
          <el-option
            v-for='item in endcountries'
            :key='item.value'
            :label='item.name'
            :value='item.value'
          ></el-option>
        </el-select>
        <el-select
          v-model='filterForm.source'
          :placeholder='filterForm.show3'
          @change='selectGet3'
          filterable
          clearable
          class='normal-input'
          style='width: 200px; margin-left: 10px;'
        >
          <el-option
            v-for='item in source'
            :key='item.value'
            :label='item.name'
            :value='item.value'
          ></el-option>
        </el-select>
        <el-button
          class='filter-item'
          type='primary'
          plain
          icon='el-icon-search'
          @click='handleFilter(0)'
          style='margin-left: 10px;'
        >筛选</el-button>
        <el-button
          class='filter-item'
          type='primary'
          plain
          icon='el-icon-refresh'
          @click='handleFilter(1)'
          style='margin-left: 10px;'
        >重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data='orderList' border fit v-loading="loading" el-tabl stripe style='width: 100%;'>
      <el-table-column prop='id' align='center' label='编号' width='0' v-if='false'></el-table-column>
      <el-table-column prop='orderNum' align='center' label='订单编号' width='150'></el-table-column>
      <el-table-column prop='country' align='center' min-width='150px' label='外商国别' sortable></el-table-column>
      <el-table-column prop='orderDate' align='center' min-width='150px' label='订单日期' sortable></el-table-column>
      <el-table-column prop='deliveryDate' align='center' min-width='150px' label='交货日期' sortable></el-table-column>
      <el-table-column prop='customs' align='center' min-width='150px' label='报关地海关' sortable></el-table-column>
      <el-table-column prop='amount' align='center' min-width='150px' label='总金额' sortable></el-table-column>
      <el-table-column prop='currency' align='center' min-width='100px' label='币种' sortable></el-table-column>
      <el-table-column
        prop='status'
        align='center'
        min-width='100px'
        label='状态'
        :filter-method='filterTag'
        :filters="[{ text: '在手订单', value: '在手订单' }, { text: '出货订单', value: '出货订单' }]"
        filter-placement='bottom-end'
      >
        <template slot-scope='scope'>
          <el-tag
            :type="scope.row.status === '在手订单' ? 'success' : 'warning'"
            disable-transitions
          >{{scope.row.status}}</el-tag>
        </template>>
      </el-table-column>
      <el-table-column min-width='100px' align='center' label='操作'>
        <template slot-scope='scope'>
          <el-button size='small' type='primary' plain @click='handleView(scope.row)'>详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class='pagination-container'>
      <el-pagination
        background
        layout='total, prev, pager, next'
        :total='total'
        :page-count='count'
        :page-size='size'
        :current-page='pageCurrent'
        @current-change='handleCurrentChange'
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  getOrderList,
  getOrderInfo3001,
  getOrderInfo3003,
  getOrderSearch
} from '@/api/order';

export default {
  name: 'Orderlist',
  data() {
    return {
      filterForm: {
        country: '',
        countryKey: '',
        endCountry: '',
        endCountryKey: '',
        source: '',
        sourceKey: '',
        startDate: '',
        endDate: '',
        show1: '获取数据中，请稍后...',
        show2: '获取数据中，请稍后...',
        show3: '获取数据中，请稍后...'
      },
      countries: [],
      endcountries: [],
      source: [],
      orderList: [],
      filter: false,
      total: 0,
      count: 0,
      pageCurrent: 1,
      size: 10,
      loading: true
    };
  },
  created() {
    // //初始化列表
    this.initOrderChange();
  },
  methods: {
    selectGet1(vId) {
      let obj = {};
      obj = this.countries.find(item => {
        return item.value === vId;
      });
      this.filterForm.countryKey = obj.key;
    },
    selectGet2(vId) {
      let obj = {};
      obj = this.endcountries.find(item => {
        return item.value === vId;
      });
      this.filterForm.endCountryKey = obj.key;
    },
    selectGet3(vId) {
      let obj = {};
      obj = this.source.find(item => {
        return item.value === vId;
      });
      this.filterForm.sourceKey = obj.key;
    },
    filterTag(value, row) {
      return row.status === value;
    },
    handleFilter(type) {
      //搜索数据
      if (type == 0) {
        this.filter = true;
        this.getOrderSearch('1');
      } else {
        this.filter = false;
        this.filterForm.startDate = '';
        this.filterForm.endDate = '';
        this.filterForm.country = '';
        this.filterForm.endCountry = '';
        this.filterForm.sourceKey = '';
        this.filterForm.countryKey = '';
        this.filterForm.endCountryKey = '';
        this.filterForm.source = '';
        this.getOrderInfoList('1');
      }
    },
    handleCurrentChange: function(pageSize) {
      if (this.filter == true) {
        this.getOrderSearch(pageSize);
      } else {
        this.getOrderInfoList(pageSize);
      }
    },
    handleView(row) {
      localStorage.setItem('orderID', row.id);
      this.$router.push({ path: '/orderDetail', query: { id: row.id } });
    },
    initOrderChange() {
      let that = this;
      var lenth = this.orderList.length;
      that.orderList.splice(0, lenth);
      //初始化所有选项
      getOrderInfo3001('3003') //国别地区//已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                key: i.configKey,
                value: i.configValue
              };
              that.countries.push(map);
              that.endcountries.push(map);
            }
            that.filterForm.show1 = '请选择外商国别';
            that.filterForm.show2 = '请选择抵运国';
          }
        })
        .catch(function(error) {
          console.log(error);
        });

      getOrderInfo3003() //港口，已修改
        .then(data => {
          var myData = data.data;
          if (myData.length > 0) {
            //加入数据内容
            for (let i of myData) {
              var map = {
                key: i.wharfCode,
                value: i.wharfName + '(' + i.wharfEnName + ')'
              };
              that.source.push(map);
            }
            that.filterForm.show3 = '请选择目的港口';
          }
        })
        .catch(function(error) {
          console.log(error);
        });
      that.getOrderInfoList('1');
    },
    getOrderInfoList(page) {
      let that = this;
      //刷新页面
      that.loading = true;
      getOrderList(page)
        .then(data => {
          that.loading = false;
          var myData = data.data;
          console.log('getOrderList ', myData);
          if (myData.length <= 0) {
            var lenth = that.orderList.length;
            that.orderList.splice(0, lenth);
          } else {
            lenth = that.orderList.length;
            that.orderList.splice(0, lenth);
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.id,
                orderNum: i.orderCodeGov,
                computerName: i.companyHsName,
                country: i.foreignCountry,
                orderDate: i.orderTime,
                deliveryDate: i.deliveryTime,
                customs: i.declareCustoms,
                amount: i.totalPrice,
                currency: i.orderCurrency,
                status: i.applicationState == '1' ? '在手订单' : '出货订单'
              };
              that.orderList.push(map);
            }
            var page = data.page;
            that.total = page.resultCount;
            that.count = page.pageCount;
            that.pageCurrent = page.pageCurrent;
            that.size = page.pageLimit;
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    },
    getOrderSearch(page) {
      let that = this;

      that.loading = true;
      getOrderSearch(
        that.filterForm.startDate,
        that.filterForm.endDate,
        that.filterForm.countryKey,
        that.filterForm.endCountryKey,
        that.filterForm.sourceKey,
        page
      )
        .then(data => {
          that.loading = false;
          var myData = data.data;
          if (myData.length <= 0) {
            var lenth = that.orderList.length;
            that.orderList.splice(0, lenth);
          } else {
            lenth = that.orderList.length;
            that.orderList.splice(0, lenth);
            //加入数据内容
            for (let i of myData) {
              var map = {
                id: i.id,
                orderNum: i.orderCodeGov,
                computerName: i.companyHsName,
                country: i.foreignCountry,
                orderDate: i.orderTime,
                deliveryDate: i.deliveryTime,
                customs: i.declareCustoms,
                amount: i.totalPrice,
                currency: i.orderCurrency,
                status: i.applicationState == '1' ? '在手订单' : '出货订单'
              };
              that.orderList.push(map);
            }
            var page = data.page;
            that.total = page.resultCount;
            that.count = page.pageCount;
            that.pageCurrent = page.pageCurrent;
            that.size = page.pageLimit;
          }
        })
        .catch(function(error) {
          console.log(error);
          that.loading = false;
        });
    }
  }
};
</script>
<style>
</style>
